<template>
  <a-spin :spinning="confirmLoading">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <!-- <div class="table-page-search-wrapper"></div> -->

      <!-- 操作按钮区域 -->

      <!-- table区域-begin -->
      <div>
        <a-table ref="table" size="middle" bordered rowKey="billNo" :columns="columns" :dataSource="dataSource"
          :pagination="false" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">
          <span slot="bizStatus" slot-scope="text, record">
            <a-switch v-model="record.bizStatus" @change="handleStatus(record)" />
          </span>
          <span slot="showDetail" slot-scope="text, record">
            <a-popover placement="rightTop">
              <template #content>
                <template v-if="record.ruleType === 51">
                  <div>尊敬的顾客，最新交易提醒：</div>
                  <div>消费时间：xxx</div>
                  <div>消费门店：xxx</div>
                  <div>消费类型：xxx</div>
                  <div>消费金额：xxx</div>
                  <div>积分增加：xxx</div>
                  <div>期待您再次光临！</div>
                </template>
                <template v-if="record.ruleType === 52">
                  <div>您好，您的积分消费成功，明细如下：</div>
                  <div>消费店铺：xxx店</div>
                  <div>消费积分：xxx</div>
                  <div>积分余额：xxx</div>
                  <div>消费时间：xxx</div>
                  <div>期待您再次光临！</div>
                </template>
              </template>
              <template #title>
                <span>消息预览</span>
              </template>
              <a>预览</a>
            </a-popover>
          </span>
        </a-table>
      </div>
      <!-- table区域-end -->

      <!-- 表单区域 -->
    </a-card>
  </a-spin>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { postAction } from '@/api/manage'
import moment from 'moment'
import Template1 from '../jeecg/JVxeDemo/layout-demo/Template1.vue'

export default {
  name: 'PublicNumberSetting',
  mixins: [JeecgListMixin],
  components: { Template1 },
  data() {
    return {
      description: '公众号消息设置',
      disableMixinCreated: true,
      confirmLoading: false,
      model: {},
      moment,
      // 表头
      columns: [
        {
          title: '消息类别',
          align: 'center',
          dataIndex: 'ruleType',
          customRender: (text, record) => {
            if (text === 51) {
              return '购物提醒'
            }
            if (text === 52) {
              return '积分消费提醒'
            }
          }
        },
        {
          title: '消息规则',
          align: 'center',
          dataIndex: 'ruleType',
          customRender: (text, record) => {
            if (text === 51) {
              return '购物成功后，公众号推送消息'
            }
            if (text === 52) {
              return '积分消费后，公众号推送消息'
            }
          }
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'bizStatus',
          scopedSlots: { customRender: 'bizStatus' }
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'showDetail',
          scopedSlots: { customRender: 'showDetail' }
        }
      ],

      url: {
        list: '/message/setting/list',
        changeStatus: '/message/setting/changeStatus'
      }
    }
  },
  computed: {},
  created() {
    this.$set(this.queryParam, 'tplType', 'WX')
    this.searchQuery1()
  },
  methods: {
    searchQuery1() {
      this.loadData(1)
    },

    handleStatus(record) {
      let param = {
        id: record.id,
        bizStatus: record.bizStatus ? 1 : 0
      }
      postAction(this.url.changeStatus, param).then(res => {
        if (res.success) {
          this.$message.info('操作成功')
          this.loadData()
        } else {
          this.$message.warn(res.message)
          this.loadData()
        }
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>